<template>
  <div class="main">

    <el-container class="chart-container" style="background-color: #f0f0f0;">
      <el-main>
        <el-row :gutter="20" justify="end" align="middle" style="margin-bottom: 10px;">
          <el-col :span="24" class="download-section" style="text-align: right;">
            <el-button
                type="primary"
                class="download-button"
                @click="downloadLast30DaysExcel">
              近30天电影播放榜单下载
            </el-button>
            <el-button
                type="primary"
                class="download-button"
                @click="downloadAllDaysExcel">
              全部时间电影播放榜单下载
            </el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card shadow="always">
              <div id="bie" style="width: 100%; height: 400px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="always">
              <div id="bar" style="width: 100%; height: 400px;"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <el-card shadow="always">
              <div id="line" style="width: 100%; height: 400px"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {Bar, Bie, Line, exportLast30DaysExcel, exportAllDaysExcel} from "@/api/echarts";
import * as echarts from "echarts";

export default {

  data() {
  },

  mounted() {
    this.initEcharts()
  },

  methods: {

    initEcharts() {
      Bie().then(res => {
        // console.log("inBie");
        //开始渲染数据
        this.initBie(res.data)

      })
      // this.initBar();
      Bar().then(res => {
        // console.log("inBar");
        //开始渲染数据
        let map = res.data;
        this.initBar(map.xAxis, map.yAxis)
      })
      Line().then(res => {
        // console.log("inBar");
        //开始渲染数据
        let map = res.data;
        this.initLine(map.xAxis, map.yAxis)
      })
    },

    initBie(data) {
      let chartDom = document.getElementById('bie');
      let myChart = echarts.init(chartDom, 'dark');
      let option;

      option = {
        title: {
          text: '电影库影片类型统计',
          subtext: '统计维度：每分类数量',
          left: 'center'
        },
        backgroundColor: '#28243c',
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '电影分类',
            type: 'pie',
            radius: ['40%', '70%'],
            data: data,
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 8,
              borderColor: '#28243c',
              borderWidth: 2
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              }

            }
          }
        ]
      };

      option && myChart.setOption(option);
    },

    initBar(xAxis, yAxis) {
      let chartDom = document.getElementById('bar');
      let myChart = echarts.init(chartDom, 'dark');
      let option;

      option = {
        title: {
          text: '本站用户影片类型观看次数统计',
          subtext: '统计维度：每分类总观看数',
          left: 'center'
        },
        backgroundColor: '#28243c',
        xAxis: {
          type: 'category',
          data: xAxis
        },
        yAxis: {
          type: 'value',

        },
        tooltip: {
          trigger: 'axis', // 设置触发类型为 axis
          formatter: '{b}: {c}次' // {b} 表示类目轴的数据，{c} 表示数值
        },
        series: [
          {
            data: yAxis,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (data) {
                return data.value + '次'
              }
            },

            itemStyle: {
              barBorderRadius: [2, 2, 0, 0], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, [{//代表渐变色从正上方开始
                    offset: 0,
                    color: '#f1a243'
                  }, //柱图渐变色
                    {
                      offset: 1, //指100%处的颜色
                      color: '#c50058'
                    }
                  ]
              ),
            },
          }
        ]
      };

      option && myChart.setOption(option);
    },

    initLine(xAxis, yAxis) {
      let chartDom = document.getElementById('line');
      let myChart = echarts.init(chartDom, 'dark');
      let option;

      option = {
        title: {
          text: '近七天本站用户观看总量',
          subtext: '',
          left: 'center'
        },
        backgroundColor: '#28243c',
        xAxis: {
          type: 'category',
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis', // 设置触发类型为 axis
          formatter: '{b}: {c}次' // {b} 表示类目轴的数据，{c} 表示数值
        },
        series: [
          {
            data: yAxis,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: '#fff',
                borderColor: '#4bc8db',
                areaStyle: {
                  type: 'default',
                  opacity: 0.4
                }
              }
            },
            lineStyle: {
              // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0, color: '#4C84FF' // 0% 处的颜色
                }, {
                  offset: 1, color: '#28d016' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              width: 2,
              shadowBlur: 10,
              shadowColor: 'rgba(50,227,42,0.5)',
              shadowOffsetX: 10,
              shadowOffsetY: 20,
            },
            areaStyle: {
              normal: {
                color: 'rgba(255,255,255,0)'
              }
            },
          }
        ]
      };

      option && myChart.setOption(option);
    },
    async downloadLast30DaysExcel() {
      try {
        const response = await exportLast30DaysExcel();
        const url = window.URL.createObjectURL(new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', '近30天电影播放榜单.xlsx'); // 设置下载文件的名字
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (error) {
        console.error('前端出错')
        console.error('下载失败:', error.response ? error.response.data : error.message);
      }
    },
    async downloadAllDaysExcel() {
      try {
        const response = await exportAllDaysExcel();
        const url = window.URL.createObjectURL(new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', '全部时间电影播放榜单.xlsx'); // 设置下载文件的名字
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (error) {
        console.error('前端出错')
        console.error('下载失败:', error.response ? error.response.data : error.message);
      }
    },
  },

}
</script>

<style scoped>

.main {

}

.chart-container {
  background-color: #1f1c30 !important;
}

#bie, #bar, #line {
  width: 100%;
  height: 100%;
}

.el-main {
  background-color: #1f1c30;
  color: #333;
  padding: 30px 70px 50px;
  min-height: 500px;
  align-items: stretch;
}

.el-card {
  background-color: #28243c;
  border: none;
  box-shadow: rgb(51, 38, 77) 0px 18px 25px -10px;
}

.el-button {
  background-color: #7b8cf6 !important;
  border: none;
  margin-bottom: 10px;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
}

.el-button:hover {

}

</style>